/*
 * @Author: taosong 
 * @Date: 2019-12-20 18:24:24 
 * @Last Modified by: taosong
 * @Last Modified time: 2019-12-20 18:25:57
 */
<template>
  <div class="container">
    <div class="title">最佳匹配</div>
    <div v-show="artist.length" class="artist">
      <img :src="artist.length > 0 ? artist[0].img1v1Url : ''" alt />
      <p>歌手:&nbsp;{{artistName}}</p>
      <span class="iconfont icon">&#xe641;</span>
    </div>
    <div v-show="mv.length" class="artist">
      <img class="imgs" :src="mv.length > 0 ? mv[0].cover : ''" alt />
      <span class="circle"></span>
      <div @click="jumpMV(video[0].vid)" class="content">
        <span class="titles">
          MV:&nbsp;
          <span class="text">{{mv.length > 0 ? mv[0].name : ''}}</span>
        </span>
        <span class="texts">{{mv.length > 0 ? mv[0].artistName : ''}}</span>
      </div>
      <span class="iconfont icon">&#xe641;</span>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "SearchListDetail",
  data() {
    return {
      artist: [],
      mv: [],
      video: []
    };
  },
  methods: {
    jumpMV(id) {
      this.$router.push(`/MusicMv/${id}`);
    }
  },
  computed: {
    ...mapState("searchList", {
      result: "result"
    }),
    artistName() {
      return this.artist.length > 0 ? this.artist[0].name : "";
    }
  },
  watch: {
    result() {
      const results = this.result,
        { orders } = results;
      orders.includes("artist")
        ? (this.artist = results.artist)
        : (this.artist = []);
      orders.includes("mv") ? (this.mv = results.mv) : (this.mv = []);
      orders.includes("video")
        ? (this.video = results.video)
        : (this.video = []);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./src/common/scss/variable.scss";
@import "./src/common/scss/mixin.scss";
.container {
  @include display-c;
  .title {
    font-size: 32px;
    color: $color-gray;
    margin-top: 30px;
    margin-left: 15px;
  }
  .artist {
    @include display-r;
    position: relative;
    align-items: center;
    padding-top: 20px;
    padding-left: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    img {
      width: 140px;
      height: 140px;
    }
    .imgs {
      height: 140px;
      width: 200px;
    }
    .circle {
      position: absolute;
      top: 50%;
      left: 100px;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 2px solid #fff;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background: url("");
    }
    p {
      font-size: 44px;
      margin-left: 30px;
    }
    .content {
      @include display-c;
      margin-left: 50px;
      .titles {
        font-size: 44px;
        .text {
          color: #507daf;
        }
      }
      .texts {
        font-size: 35px;
        color: #999;
        margin-top: 25px;
      }
    }
    .icon {
      position: absolute;
      top: 50%;
      right: 30px;
      transform: translateY(-55%);
      font-size: 40px;
      font-weight: bold;
      color: #999;
    }
  }
}
</style>